<template>
<div>
  <vue-particles
    color="#fff"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#fff"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
    class="lizi"></vue-particles>
  <div class="">
    <div class="name">
      <p>工具合集网 <span style="font-size: 25px">Tools Collection Website</span> </p>
    </div>
    <div class="ms-login">
      <div style="width: 420px;">
        <!--<div class="login-title clearfix">
          &lt;!&ndash; <img src="~assets/imgs/logo.png" class="title-logo"> &ndash;&gt;
          <div class="pull-left login-tt">
            <div class="tt-en">工具合集网站</div>
            <div class="tt-cn">TOOLS COLLECTION WEBSITE</div>
          </div>
        </div>-->
        <div>
          <form @keyup.enter="submitForm">
            <div style="border-bottom: 0px solid #fff; margin-top: 30px;">
              <el-input size="large" ref="input1" placeholder="用户名" :autocomplete="rememberPwd?'on':'new-password'"
                class="lg-input glass" clearable type="text" v-model="ruleForm.username">
                <i slot="prefix" style="display: inline-block;line-height: 40px; font-size: 30px;color: #fff;" class="fa fa-fw fa-user"></i>
              </el-input>
            </div>
            <div style="border-bottom: 0px solid #fff;margin-top: 30px;">
              <el-input size="large" ref="input2" placeholder="密    码" :autocomplete="rememberPwd ? 'on':'new-password'"
                class="lg-input glass" clearable type="password" v-model="ruleForm.password">
                <i slot="prefix" style="display: inline-block;line-height: 40px; font-size: 30px;color: #fff;" class="fa fa-fw fa-lock"></i>
              </el-input>
            </div>
            <div style="line-height: 20px;padding: 20px 0;">
              <!-- <el-checkbox v-model="rememberPwd" style="">记住密码</el-checkbox> -->
            </div>
            <div style="height: 10px;"></div>
            <div class="login-btn">
              <el-button :disabled="loading" class="glass"
              style="width: 100%;height: 50px;font-size: 18px; background-color:rgba(0,0,0,0); border: 0px rgba(0,0,0,0); color: #FFF;"
                @click.prevent="submitForm">注&emsp;&emsp;册</el-button>
                <div class="toLogin" @click="toLogin">点击登陆</div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
</template>


<script>

let rebPwd = window.localStorage.getItem('REMEMBER_PWD') || false;
if (rebPwd) {
  rebPwd = true;
}
import md5 from 'js-md5'
export default {
  data() {
    return {
      loading: false,
      userInfoList: [],
      ruleForm: {
        username1: '',
        password1: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
      rememberPwd: rebPwd,
    };
  },
  mounted() {
  },
  methods: {
    submitForm() {
      if (this.ruleForm.username && this.ruleForm.password) {
        this.registerUser();
      } else {
        this.$message({
          type: 'warning',
          message: '请输入用户名密码',
        });
      }
    },
    // 注册用户
    registerUser() {
      let params = {
        username: this.ruleForm.username,
        password: md5(this.ruleForm.password)
      }
      this.$store.dispatch("AUTH_REGISTER",params);
    },
    // 跳转登陆页面
    toLogin() {
      this.$router.push({ path: '/login'});
    },
  },
};
</script>


<style lang="scss" scoped>
.glass {
  box-shadow:0 0 0 1px white ;
  border-radius: 5px;
}
.login-page {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    // background: linear-gradient(45deg,black, #031c35, #0f7eee, #57a5f4);
  }
  // &:before {
  //   content: '';
  //   position: absolute;
  //   z-index: -2;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  //   -webkit-filter:blur(5px);
  //   filter:blur(5px);
  // }
}
.ms-login {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  .login-title {
    margin-bottom: 50px;
    text-align: center;
  }
  .title-logo {
    float: left;
    margin-left: 20px;
    margin-bottom: 10px;
  }
  .login-tt {
    padding-left: 20px;
    color: #fff;
  }
  .tt-en {
    font-size: 38px;
    font-weight: 200;
    font-family: Helvetica;
  }
  .tt-cn {
    font-size: 19px;
    margin-top: 5px;
  }
  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 50px;
    color: #fff;
  }
}


.lg-input {
  ::v-deep input.el-input__inner {
    font-size: 16px;
    color: #fff !important;
    border: none !important;
    background-color: transparent !important;
    -webkit-text-fill-color: #fff;
    &:-webkit-autofill {
      border: none !important;
      color: #fff !important;
      background-color: transparent !important;
      box-shadow: 0 0 0px 400px #343434 inset;
      -webkit-box-shadow: 0 0 0px 400px #343434 inset;
    }
    &:-webkit-autofill:hover {
      border: none !important;
      color: #fff !important;
      background-color: transparent !important;
      box-shadow: 0 0 0px 400px #343434 inset;
      -webkit-box-shadow: 0 0 0px 400px #343434 inset;
    }
    &:-webkit-autofill:focus {
      border: none !important;
      color: #fff !important;
      background-color: transparent !important;
      box-shadow: 0 0 0px 400px #343434 inset;
      -webkit-box-shadow: 0 0 0px 400px #343434 inset;
    }
  }
}
.toLogin{
  cursor: pointer;
  text-align: right;
  color: white;
  font-size: 16px;
  margin: 16px;
}
.lizi{
  /* background-color: gray; */
  background: linear-gradient(45deg, #3874e4, #2965e1, #0f7eee, #57a5f4);
  position: absolute;
  top: 0px;
  z-index: -1;
  /* width: 100vw;
  height: 100vh; */
  left: 0px;
  width: 100%;
  height: 100%;
}
.name{
  padding-top: 60px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  text-align: center;

}
</style>